<template>
  <a-card class="general-card" title="舆情分析" :header-style="{ paddingTop: '10px', paddingBottom: '12px' }">
    <a-grid :cols="24" :col-gap="12" :row-gap="12">
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
        <ChainItem
          title="访问总人次"
          :chart-data="visitChart"
          :card-style="{
            background:
              appStore.mode === 'dark' ? 'linear-gradient(180deg, #284991 0%, #122B62 100%)' : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)',
          }" />
      </a-grid-item>
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
        <ChainItem
          title="内容发布量"
          :chart-data="contentChart"
          :card-style="{
            background:
              appStore.mode === 'dark' ? ' linear-gradient(180deg, #3D492E 0%, #263827 100%)' : 'linear-gradient(180deg, #F5FEF2 0%, #E6FEEE 100%)',
          }" />
      </a-grid-item>
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
        <ChainItem
          title="评论总量"
          :chart-data="commentChart"
          :card-style="{
            background:
              appStore.mode === 'dark' ? 'linear-gradient(180deg, #294B94 0%, #0F275C 100%)' : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)',
          }" />
      </a-grid-item>
      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
        <ChainItem
          title="分享总量"
          :chart-data="shareChart"
          :card-style="{
            background:
              appStore.mode === 'dark' ? 'linear-gradient(180deg, #312565 0%, #201936 100%)' : 'linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)',
          }" />
      </a-grid-item>
    </a-grid>
  </a-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useAppStore } from '@/store'

import ChainItem from './chain-item.vue'

const appStore = useAppStore()

const visitChart = ref({})
const contentChart = ref({})
const commentChart = ref({})
const shareChart = ref({})

// 页面加载完成执行
onMounted(async () => {
  const visitData = {
    name: '2001',
    count: 5670,
    growth: 206.32,
    text: '较昨日',
    type: 'rise',
    chartData: [55, 12, 94, 79, 50, 29, 58, 31, 82, 34, 22, 94, 86, 13, 74, 98, 33, 61, 60, 49, 100, 40, 49],
  }

  visitChart.value = {
    count: visitData.count,
    text: visitData.text,
    growth: visitData.growth,
    type: visitData.type,
    chartOption: {
      grid: {
        left: 0,
        right: 0,
        top: 10,
        bottom: 0,
      },
      xAxis: {
        type: 'category',
        show: false,
      },
      yAxis: {
        show: false,
      },
      tooltip: {
        show: true,
        trigger: 'axis',
      },
      series: [
        {
          name: visitData.name,
          data: visitData.chartData,
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle: {
            color: '#6AA1FF',
            width: 3,
            type: 'dashed',
          },
        },
      ],
    },
  }

  const contentData = {
    name: 'total',
    count: 8657,
    growth: 120.16,
    text: '较昨日',
    type: 'rise',
    chartData: [34, 62, 97, 87, 52, 44, 53, 88, 56, 79, 79, 95],
  }

  const barData = contentData.chartData.map((item, idx) => {
    return {
      value: item,
      itemStyle: {
        color: idx % 2 ? '#2CAB40' : '#86DF6C',
      },
    }
  })

  contentChart.value = {
    count: contentData.count,
    text: contentData.text,
    growth: contentData.growth,
    type: contentData.type,
    chartOption: {
      grid: {
        left: 0,
        right: 0,
        top: 10,
        bottom: 0,
      },
      xAxis: {
        type: 'category',
        show: false,
      },
      yAxis: {
        show: false,
      },
      tooltip: {
        show: true,
        trigger: 'axis',
      },
      series: {
        name: 'total',
        data: barData,
        type: 'bar',
        barWidth: 7,
        itemStyle: {
          borderRadius: 2,
        },
      },
    },
  }

  const commentData = {
    name: '2001',
    count: 3248,
    growth: 15.32,
    text: '较昨日',
    type: 'fall',
    chartData: [95, 62, 80, 49, 30, 91, 16, 11, 32, 36, 62, 97, 60, 49, 84, 34, 40, 49, 74, 91, 68, 99, 49, 42],
  }

  commentChart.value = {
    count: commentData.count,
    text: commentData.text,
    growth: commentData.growth,
    type: commentData.type,
    chartOption: {
      grid: {
        left: 0,
        right: 0,
        top: 10,
        bottom: 0,
      },
      xAxis: {
        type: 'category',
        show: false,
      },
      yAxis: {
        show: false,
      },
      tooltip: {
        show: true,
        trigger: 'axis',
      },
      series: [
        {
          name: commentData.name,
          data: commentData.chartData,
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle: {
            color: '#6AA1FF',
            width: 3,
            type: 'dashed',
          },
        },
      ],
    },
  }

  const shareData = {
    name: '2001',
    count: 7568,
    growth: 78.86,
    text: '较昨日',
    type: 'rise',
    chartData: [
      {
        name: '文本',
        value: 25,
      },
      {
        name: '图文',
        value: 35,
      },
      {
        name: '视频',
        value: 40,
      },
    ],
  }

  shareChart.value = {
    count: shareData.count,
    text: shareData.text,
    growth: shareData.growth,
    type: shareData.type,
    chartOption: {
      color: ['#8d4eda', '#165dff', '#00b2ff'],
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
      legend: {
        show: true,
        top: 'center',
        right: '0',
        orient: 'vertical',
        icon: 'circle',
        itemWidth: 6,
        itemHeight: 6,
        textStyle: {
          color: '#4E5969',
        },
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          name: '总计',
          type: 'pie',
          radius: ['50%', '70%'],
          label: {
            show: false,
          },
          data: shareData.chartData,
        },
      ],
    },
  }
})
</script>

<style lang="less" scoped>
.general-card {
  border-radius: 4px;
  border: none;

  :deep(.arco-card-header) {
    height: auto;
    padding: 20px;
    border: none;
  }
}
</style>
